<!--
 * @Descripttion: 
 * @version: 
 * @Author: Jf W
 * @Date: 2021-08-12 14:12:11
 * @LastEditors: Please set LastEditors
 * @LastEditTime: 2021-08-19 09:45:42
-->
<template>
  <div class="button">
    <el-button
      type="info"
      class="delete-button"
      @click="methods.open"
    >
      批量移除
    </el-button>
  </div>
  <el-table
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%"
    class="table"
    :header-cell-style="{
      background:'#F2F2F2',
      fontWeight: 400, 
      color: '#000'
    }"
    @selection-change="methods.handleSelectionChange"
  >
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    <el-table-column
      label="产品信息"
      width="600"
      color="#F2F2F2"
    >
      <template #default="scope">
        {{ scope.row.date }}
      </template>
    </el-table-column>
    <el-table-column
      prop="name"
      label="状态"
      width="120">
    </el-table-column>
  </el-table>
</template>

<script lang="ts">
import { defineComponent, reactive } from 'vue'
import { ElMessageBox } from 'element-plus'
import { ElMessage } from 'element-plus'

export default defineComponent ({
  setup() {
    const tableData = reactive([
      {
        date: '2016-05-03',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-02',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-04',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-01',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-08',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-06',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      },
      {
        date: '2016-05-07',
        name: '王小虎',
        address: '上海市普陀区金沙江路 1518 弄'
      }
    ])

    const multipleSelection = reactive([])

    const methods = reactive({
      handleSelectionChange(val: any) {
        multipleSelection.value = val
      },
      open() {
        ElMessageBox.confirm('确认批量移除？(可在回收站中找回）', '提示', {
          cancelButtonText: '取消',
          confirmButtonText: '确定',
          type: 'warning',
        })
          .then(() => {
            ElMessage({
              type: 'success',
              message: '删除成功!',
            })
          })
          .catch(() => {
            ElMessage({
              type: 'info',
              message: '已取消删除',
            })
          })
      }
    })

    return {
      multipleSelection,
      tableData,
      methods
    }
  }
})
</script>

<style lang="scss" scoped>
.button {
  margin-bottom: 10px;
  .delete-button {
    background-color: #fff;
  }
}

.el-button--info {
  padding: 5px;
  background-color: #F2F2F2;
  color: #555;
  border: 1px solid #DADADA;
  margin-left: 100px;
}
:deep .el-message-box__title span{
  font-size: 14px;
}

</style>


